<!DOCTYPE html>
{% load staticfiles %}
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>Lab</title>
  <link rel="stylesheet" href={% static 'dist/css/thirdparty/bootstrap.min.css' %} />

  <script type="text/javascript" src={% static 'dist/js/thirdparty/jquery-1.11.3.min.js' %}></script>
  <script type="text/javascript" src={% static 'dist/js/thirdparty/jquery.form.js' %}></script>
  <script type="text/javascript" src={% static 'dist/js/thirdparty/bootstrap.min.js' %}></script>
</head>
<body>
  <form id="wp-upload-form" enctype="multipart/form-data" method="post" action="/plus/doupload">
    <div class="row">
      <div class="col-md-3 col-sm-3 col-lg-3">
        <div class="input-group">
          <input type="file" class="form-control" id="wp-upload-file-selector" name="wp-upload-file" form="wp-upload-form">
          <span class="input-group-btn">
            <button class="btn btn-default" type="submit">上传</button>
          </span>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-3 col-sm-3 col-lg-3">
        <div class="alert alert-info" id="wp-upload-info">

        </div>
      </div>
    </div>
  </form>
  <script type="text/javascript">
    $(document).ready(function(e) {
      $("#wp-upload-form").submit(function (e) {
        $("#wp-upload-form").ajaxSubmit({
          uploadProgress : function(e, postion, total, percentComplete) {
            $("#wp-upload-info").text("upload complete " + percentComplete + "%");
            if (percentComplete == 100) {
              $("#wp-upload-info").removeClass("alert-info").addClass("alert-success")
            }
          }
        });
      })

      $("#wp-upload-file-selector").change(function(e) {
        $("#wp-upload-info").text($("#wp-upload-file-selector").val());
      })
    })
  </script>
</body>
</html>